<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS栅格化传统布局</title>
    <link rel="stylesheet" href="css_栅格化布局.css">
</head>
<body>
    <h1>CSS栅格化传统布局系统</h1>
    <p>核心概念：容器（container）、行（row）、列（col）
        、槽（gutter） 、位移offset
    <p>延伸：960栅格系统</p>
    <div class="container bg">
        <div class="row">
            <div class="col cokl-1">列1</div>
            <div class="col col-2">列2</div>
            <div class="col col-3">列3</div>
            <div class="col col-4">列4</div>
            <div class="col col-5">列5</div>
            <div class="col col-6">列6</div>
            <div class="col col-7">列7</div>
            <div class="col col-8">列8</div>
            <div class="col col-9">列9</div>
            <div class="col col-10">列10</div>
            <div class="col col-11">列11</div>
            <div class="col col-12">列12</div>
        </div> 
        <div class="row">
            <div class="col col-3">3列</div>
            <div class="col col-7">7列</div>
            <div class="col col-2">2列</div>
        </div>
        <div class="row">
            <div class="col col-4">偏移4列，占4列</div>
        </div>
        <div class="row">
            <div class="col col-12">12列</div>
        </div>
    </div>
    

</body>
</html>